

<template>        
    <div class="nav">

        <el-row class="user-part">
            <div class="user-part-wrapper">
                <el-image style="width: 40px; height: 40px" :src="url" />
            </div>
        </el-row>

        <el-row class="action-part">

            <div class="action-part-wrapper">
                <div 
                    class="action-part-wrapper-message" 
                    @click="changeLabel('message')"
                    >
                    <el-icon :size="20" :class="{'hover-icon-text-color':isHoverdMessage}">
                        <Message />
                    </el-icon>
                    <span :class="{'hover-icon-text-color':isHoverdMessage}">消息</span>
                </div>
                <div 
                    class="action-part-wrapper-notice"
                    @click="changeLabel('notice')"
                
                >
                    <el-icon :size="20" :class="{'hover-icon-text-color':isHoverdMemo}">
                        <Memo />
                    </el-icon>
                    <span :class="{'hover-icon-text-color':isHoverdMemo}">通讯录</span>
                </div>
                <div 
                    class="action-part-wrapper-settings" 
                    @click="changeLabel('settings')"
                    >
                    <el-icon :size="20" :class="{'hover-icon-text-color':isHoverdSetting}">
                        <Setting />
                    </el-icon>
                    <span :class="{'hover-icon-text-color':isHoverdSetting}">设置</span>
                </div>
              

            </div>
        </el-row>
        
        <el-row class="quit-part">
            <div 
                class="quit-part-wrapper" 
                @click="changeLabel('quit')"
                >
                <!-- 通过ref的false和true动态绑定类,用来改变属性 -->
                <el-icon :size="20" :class="{'hover-icon-text-color':isHoverdSwitchButton}">
                    <SwitchButton />
                </el-icon>
                <span :class="{'hover-icon-text-color':isHoverdSwitchButton}">退出</span>
            </div>
        </el-row>
        
    </div>
</template>

<script setup>

import {ref, watch} from "vue"
import { Message,Memo,Setting,SwitchButton} from '@element-plus/icons-vue'
import { defineEmits } from 'vue';
import { useStore } from 'vuex'
// nav子组件给home父组件传递切换标签的名称
const emit = defineEmits(["changeLabel"])

const menuList = ref([
    {name:"a"},{name:"b"},{name:"c"}
])


const store = useStore()
const userinfo = store.state.userInfo
// 使用登陆成功后存储的avatar
const url = userinfo.avatar


// 默认进入会话页面
const isHoverdMessage = ref(true)
const isHoverdMemo = ref(false)
const isHoverdSetting = ref(false)
const isHoverdSwitchButton = ref(false)
 

// 鼠标移入左侧菜单栏图标和文字变色
const handleMouseEnter = (item)=>{
    console.log("鼠标移入",item);
    if (item === "message") {
        isHoverdMessage.value = true
    }else if (item === "notice") {
        isHoverdMemo.value = true
    }else if (item === "settings") {
        isHoverdSetting.value =true
    }else{
        isHoverdSwitchButton.value =true
    }
}
const handleMouseLeave = (item)=> {
    if (item === "message") {
        isHoverdMessage.value = false
    }else if (item === "notice") {
        isHoverdMemo.value = false
    }else if (item === "settings") {
        isHoverdSetting.value =false
    }else{
        isHoverdSwitchButton.value =false
    }
}



// 点击信息和通讯录标签后调用
const changeLabel = (labelName)=> {
    // 给父组件传递更换标签页属性
    if (labelName === "message") {
        // console.log("Nav切换右边列表页面为",labelName);
        isHoverdMessage.value = true
        isHoverdMemo.value = false
        isHoverdSetting.value = false
        isHoverdSwitchButton.value = false
        emit("changeLabel",labelName)
    }else if (labelName === "notice") {
        // console.log("Nav切换右边列表页面为",labelName);
        isHoverdMessage.value = false
        isHoverdMemo.value = true
        isHoverdSetting.value = false
        isHoverdSwitchButton.value = false
        emit("changeLabel",labelName)
    }else if (labelName === "settings") {
        isHoverdSetting.value =true
        isHoverdMessage.value = false
        isHoverdMemo.value = false
        isHoverdSwitchButton.value = false
    }else{
        isHoverdSwitchButton.value =true
        isHoverdSetting.value =false
        isHoverdMessage.value = false
        isHoverdMemo.value = false
    }
}

// =============================== 监听父组件的colorValue值,变化后调整背景颜色 ===============================

const props = defineProps({
    colorValue:String,
})
const navColor = ref("#2d353b")
// 监听nav标签切换后,父组件传递的值变化
watch(()=>props.colorValue, (newValue, oldValue)=>{
    console.log("子组件监听父组件传递的值",newValue, oldValue);
    // 直接切换颜色
    console.log("header切换颜色后,nav监控到的值变化");
    console.log(newValue,oldValue)
    if (newValue != oldValue) {
        navColor.value = newValue
    }
},{immediate:true})

</script>

<style lang="scss" scoped>

.hover-icon-text-color {
    color: green;
}

.nav {
    display: flex;
    // width: 100%;
    width: 80px;
    height: 100%;
    flex-direction: column;
    background-color: v-bind(navColor);
    // border: solid 10px;
    span {
            font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
            letter-spacing: 2px;
            font-size: 14px;
    }
    .user-part{

        margin-top: 40px;
        height: 10vh;
        // flex-wrap: nowrap;
        display: flex;
        justify-content: center;

        .user-part-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            ::v-deep .el-image {
            margin: 10px;
            }
            // div变为圆形
            border-radius: 50%;
            :deep(.el-image__inner){
                border-radius: 50%;
            }
        }
    }
    .action-part {
        .action-part-wrapper{
            margin-top: 20px;
            width: 100%;
            height: 60vh;
            display: flex;
            flex-direction: column;
            // justify-content:space-between;
            align-items: center;
        
            .action-part-wrapper-message,.action-part-wrapper-notice,.action-part-wrapper-settings{
                width: 50px;
                height: 50px;
                color: whitesmoke;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                margin-top: 40px;
            }

        }
    }

    .quit-part {
        height: 20vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        align-items: center;
        .quit-part-wrapper {
            width: 50px;
            height: 50px;
            color: whitesmoke;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
    }
    
}

</style>